<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-cell title="单选" arrow @onClick="handleClick('single')"></pure-cell>
            <a-gap></a-gap>
            <pure-cell title="多选" arrow @onClick="handleClick('multiple')"></pure-cell>
        </a-demo>

        <pure-relation-select
            title="上门取件时间"
            :show="show"
            :options="options"
            labelKey="label"
            subLabelKey="dateStr"
            childrenKey="times"
            textKey="text"
            @confirm="handleConfirm"
            :multiple="mode === 'multiple'"
            @close="show = false"
        ></pure-relation-select>
    </view>
</template>

<script setup>
    import { ref } from "vue";
    import { onLoad } from "@dcloudio/uni-app";

    // 选项 options
    const options = ref([]);

    // 显示状态
    const show = ref(false);

    // 模式
    const mode = ref("single");

    // 初始化options
    function initOptions() {
        const today = new Date();
        const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
        const afterTommorrow = new Date(tomorrow.getTime() + 24 * 60 * 60 * 1000);

        const optionToday = {
            label: "今天",
            dateStr: `${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日`,
            times: [],
        };

        const optionTomorrow = {
            label: "明天",
            dateStr: `${tomorrow.getFullYear()}年${tomorrow.getMonth() + 1}月${tomorrow.getDate()}日`,
            times: [],
        };

        const optionAfterTommorrow = {
            label: "后天",
            dateStr: `${afterTommorrow.getFullYear()}年${afterTommorrow.getMonth() + 1}月${afterTommorrow.getDate()}日`,
            times: [],
        };

        // 时段，以1小时分割
        for (let i = 0; i < 24; i++) {
            let start = i;
            let end = i + 1;
            start = start < 10 ? `0${start}:00` : `${start}:00`;
            end = end < 10 ? `0${end}:00` : `${end}:00`;
            const timeStr = `${start}:-${end}`;
            optionToday.times.push({
                text: timeStr,
            });

            optionTomorrow.times.push({
                text: timeStr,
            });

            optionAfterTommorrow.times.push({
                text: timeStr,
            });
        }

        options.value.push(optionToday);
        options.value.push(optionTomorrow);
        options.value.push(optionAfterTommorrow);
    }

    onLoad(() => {
        // 初始化options
        initOptions();
    });

    // 显示
    function handleClick(type) {
        mode.value = type;
        show.value = true;
    }

    // 确认选择
    function handleConfirm(datas) {
        console.log("确认选择 ->", datas);
        show.value = false;
    }
</script>

<style scoped></style>
